<template>
  <ex-dialog
    width="50%"
    class="ex-diolog"
    title="重新报备至云监管平台"
    :visible="visible"
    @closeDialog="handleClose"
    center
  >
    <div class="main" v-if="!isShow">
      <loading v-if="loading" />
      <text-list v-else label-width="200px" :column="1">
        <!-- common info -->
        <text-item label="注册类型：">{{ data.merchantTypeDict }}</text-item>
        <text-item label="商户账号名称：">{{ data.merchantName }}</text-item>
        <text-item label="营业执照注册号：">{{
          data.businessLicenseNumber
        }}</text-item>
        <text-item label="联系地址：">{{ data.merchantName }}</text-item>
        <text-item label="联系电话：">{{ data.address }}</text-item>
        <text-item label="店铺名称：">{{ data.shopName }}</text-item>
        <text-item label="审核状态：">{{ data.govStatusDict }}</text-item>
        <text-item label="上传企业营业执照：">
          <!-- <img class="business_license" :src="data.businessLicenseImg" alt=""> -->
          <ex-image
            class="img"
            :src="data.businessLicenseImg"
            :preview-src-list="[data.businessLicenseImg]"
          />
        </text-item>
      </text-list>
    </div>
    <div class="main" v-if="isShow">
      <loading v-if="loading" />
      <text-list v-else label-width="200px" :column="1">
        <!-- common info -->
        <text-item label="注册类型：">{{ data.merchantTypeDict }}</text-item>
        <text-item label="商户账号名称："
          ><el-input v-model="data.merchantName" placeholder="请输入"></el-input
        ></text-item>
        <text-item label="营业执照注册号："
          ><el-input
            v-model="data.businessLicenseNumber"
            placeholder="请输入"
          ></el-input
        ></text-item>
        <text-item label="联系地址："
          ><el-input v-model="data.address" placeholder="请输入"></el-input
        ></text-item>
        <text-item label="联系电话："
          ><el-input v-model="data.phone" placeholder="请输入"></el-input
        ></text-item>
        <text-item label="店铺名称："
          ><el-input v-model="data.shopName" placeholder="请输入"></el-input
        ></text-item>
        <text-item label="法人姓名："
          ><el-input v-model="data.name" placeholder="请输入"></el-input
        ></text-item>
        <text-item label="上传企业营业执照：">
          <!-- <ex-image
          class="img"
          :src="data.businessLicenseImg"
          :preview-src-list="[data.businessLicenseImg]"
        /> -->
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </text-item>
      </text-list>
    </div>
    <template slot="footer">
      <el-button type="danger" @click="handleClose">取消</el-button>
      <el-button type="primary" @click="agreeClick" v-if="!isShow">修改数据</el-button>
      <el-button type="primary" @click="sumit" v-if="isShow">提交</el-button>
    </template>
  </ex-dialog>
</template>
<script>
// api
import { govApplyInfo, editGovApplyInfo } from "@/api/merchants";

export default {
  props: {
    visible: Boolean,
    id: String,
    loading: false,
  },
  data() {
    return {
      isShow: false,
      types: {
        1: "企业",
        2: "个人",
      },
      status: {
        1: "正常",
        2: "冻结",
      },
      img_url: this.$IMG_URL,
      data: {},
      imageUrl: "",
      name: "",
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      uploadimg: "",
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.uploadimg = res.result.url;
    },
    getDetail() {
      govApplyInfo(this.id).then((res) => {
        console.log("获取详情", res);
        const { result } = res;
        this.data = result;
        this.uploadimg = res.result.businessLicenseImg;
        this.imageUrl =
          this.$IMG_URL+'/' + res.result.businessLicenseImg;
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },

    agreeClick() {
      //editGovApplyInfo
      this.isShow = true;
      console.log(this.isShow);
      
      // this.$confirm('是否同意?', '提示', {
      //   confirmButtonText: '是',
      //   cancelButtonText: '否',
      //   type: 'warning'
      // }).then(() => {
      //   approved(this.id).then(res => {
      //     this.$message({
      //       message: '已同意【'+this.data.merchantName+'】入住申请',
      //       type: 'success',
      //       duration: 1500,
      //     })
      //     this.$emit('success')
      //   })
      // }).catch()
    },
    sumit() {
      console.log(this.data.merchantTypeDict);
      var params = {
        id: this.id,
        merchantName: this.data.merchantName,
        phone: this.data.phone,
        businessLicenseNumber: this.data.businessLicenseNumber,
        businessLicenseImg: this.uploadimg,
        shopName: this.data.shopName,
        address: this.data.address,
        name: this.data.name
      };
      editGovApplyInfo(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
        this.handleClose();
        this.$emit("success");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.buttom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 150px;
  margin-top: 30px;
}
.txt {
  font-size: 15px;
  margin-bottom: 20px;
}
.refuseMain {
  ::v-deep .el-radio-group {
    display: flex !important;
    flex-direction: column !important;
  }
  .el-radio {
    margin-bottom: 15px !important;
    margin-left: 20px !important;
  }
  .el-input--medium {
    font-size: 14px;
    // margin-left: 44px;
  }
  .el-textarea {
    width: 100%;
  }
}
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }

  .main {
    margin: 0 auto;
  }
  .pic-list {
    display: flex;
    justify-content: space-around;
    width: 660px;
  }
  .img {
    display: block;
    width: 200px;
    height: auto;
  }
  .business_license {
    display: block;
    width: 100px;
    height: auto;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
